<template>
  <v-autocomplete v-model="chose" :disabled="false" :items="items" chips
                  color="blue-grey lighten-2" :label="title" item-text="text" item-value="value" multiple>
    <template slot="selection" slot-scope="data">
      <v-chip v-if="data.item.avatar" :selected="data.selected" close class="chip--select-multi"
              @input="data.parent.selectItem(data.item)">
        <v-avatar><img :src="'/static/'+data.item.avatar+'.png'"></v-avatar>
        {{ data.item.text }}
      </v-chip>

    </template>
    <template slot="item" slot-scope="data">
      <template v-if="typeof data.item !== 'object'">
        <v-list-tile-content v-text="data.item"></v-list-tile-content>
      </template>
      <template v-else>
        <v-list-tile-avatar v-if="data.item.avatar">
          <img :src="'/static/'+data.item.avatar+'.png'">
        </v-list-tile-avatar>
        <v-list-tile-content>
          <v-list-tile-title v-html="data.item.text"></v-list-tile-title>
        </v-list-tile-content>
      </template>
    </template>
  </v-autocomplete>
</template>

<script>
export default {
  name: 'iconItem',
  props: ['field', 'items', 'title'],
  data: function () {
    return {
      chose: ''
    }
  },
  watch: {
    chose () {
      this.$emit('upSelect', this.chose)
    },
    field () {
      this.chose = this.field
    }
  }
}
</script>

<style scoped>

</style>
